<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF8">
    <title>ESP8266自动配置</title>
</head>

<body style="font-size: 30px">

    <style>
        .inputText {
            height: 38px;
            font-size: 30px;
            line-height: 30px;
            padding-left: 15px;
            border-radius: 10px;
            background-color: #dff1f7;
            border: 2;
        }

        .inputText:focus {
            outline: none;
            background-color: #d6e4eb;
        }

        .buttonText {
            height: 38px;
            font-size: 30px;
            line-height: 30px;
            padding-left: 15px;
            border-radius: 10px;
            background-color: #FE5E08;
            border: none;
        }

        .buttonText:focus {
            outline: none;
            background-color: #FE5E08;
        }

        .buttonText:disabled {
            background-color: #c9c7c6;
        }
    </style>

    <center>
        <form>
            <table>
                <tr>
                    <td>Wifi SSID:</td>
                    <td><input type="text" class="inputText" id="SSID" placeholder="WIFI SSID"></td>
                </tr>
                <tr>
                    <td>Wifi 密码:</td>
                    <td><input type="text" class="inputText" id="PSW" placeholder="WIFI PASSWORD"></td>
                </tr>
                <tr>
                    <td>巴法云私钥:</td>
                    <td><input type="text" class="inputText" id="KEY" placeholder="USER KEY"></td>
                </tr>
                <tr>
                    <td>主题名:</td>
                    <td><input type="text" class="inputText" id="TOPIC" placeholder="TOPIC"></td>
                </tr>
            </table>
            <input id="btnsendconfig" type="button" class="buttonText" value="保存设置" onclick="config()">
        </form>
        <label id="recvtxt"></label>
    </center>
    <script language="javascript">
        function isNotEmptyStr(s) {
            if (typeof s == 'string' && s.length > 0) {
                return true
            }
            return false
        }
        function config() {
            var ssid = SSID.value;
            var psw = PSW.value;
            var key = KEY.value;
            var topic = TOPIC.value;

            if (!isNotEmptyStr(ssid)) {
                alert("请输入有效的SSID");
                return;
            }
            if (!isNotEmptyStr(psw)) {
                alert("请输入有效的Wifi密码");
                return;
            }
            if (!isNotEmptyStr(key)||key.length!=32) {
                alert("请输入有效的私钥");
                return;
            }
            if (!isNotEmptyStr(topic)) {
                alert("请输入有效的主题名");
                return;
            }
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    document.getElementById("recvtxt").innerText = xmlhttp.responseText;
                    if (xmlhttp.status == 200) {
                        alert("设置成功");
                        window.location.href = "about:blank";
                        window.close();
                    }
                    else {
                        alert("设置失败");
                        document.getElementById("btnsendconfig").disabled = false;
                    }
                }
            }
            xmlhttp.ontimeout = function () {
                window.location.href = "about:blank";
                window.close();
            }
            xmlhttp.open("GET", "/AutoConfig?ssid=" + ssid + "&psw=" + psw+"&key="+key+"&topic="+topic, true);
            xmlhttp.timeout = 1000;
            xmlhttp.send();
            document.getElementById("btnsendconfig").disabled = true;
        }
    </script>
</body>

</html>